<template>
    <div class="container">
      <!-- 当前签约信息部分 -->
      <div class="current-contract-info">
        <div class="header">
          <span>当前签约信息</span>
        </div>
        <div class="info-content">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="info-item">
                <span>签约编号</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.id}}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约状态</span>
                &nbsp; &nbsp; 
                 <el-tag v-if="contractInfo.status == '1'" type="info">待审核</el-tag>
                 <el-tag v-if="contractInfo.status == '2'" type="success">待支付</el-tag>
                 <el-tag v-if="contractInfo.status == '0'" type="warning">已驳回</el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约机构</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.homeInstitution.institutionname }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约团队</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.homeTeam.name }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约医生</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.homeDoctor.name }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>服务包</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.homeServicePackage.packageName }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约周期</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.cycle }}年</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>费用</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.homeServicePackage.price }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约类型</span>
                &nbsp; &nbsp; 
                 <el-tag v-if="contractInfo.type == '0'" type="info">首次签约</el-tag>
                 <el-tag v-if="contractInfo.type == '1'" type="success">非首次签约</el-tag>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>申请时间</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.applicationTime }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>生效日期</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.effectiveDate }}</span>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="info-item">
                <span>签约备注</span>
                &nbsp; &nbsp; 
                <span>{{ contractInfo.remark }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <!-- 签约记录部分   -->
      <div class="contract-records">
        <h2>签约记录</h2>
        <el-table :data="contractRecords" border style="width: 100%">
          <el-table-column prop="id" label="编号"></el-table-column>
          <el-table-column  label="签约机构">
            <template #default="scope">
              <span>{{ scope.row.homeInstitution.institutionname }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="team" label="签约医生团队">
            <template #default="scope">
              <span>{{ scope.row.homeTeam.name  }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="doctor" label="签约医生">
            <template #default="scope">
              <span>{{ scope.row.homeDoctor.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="servicePackage" label="服务包">
            <template #default="scope">
              <span>{{ scope.row.homeServicePackage.packageName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="applicationTime" label="申请时间"></el-table-column>
          <el-table-column prop="expirationTime" label="到期时间"></el-table-column>
          <!-- <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
  
      <!-- 返回按钮 -->
      <el-button @click="goBack">返回</el-button>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import {contractlist,qianyue} from '@/api/resident/resident.js'
import { onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
  const props = defineProps({
    userId: {
      type: Number,
      default: 1
    }
  })
  // 模拟当前签约信息数据
 let contractInfo = ref({
    id: '2021340001',
    status: '0',
    homeInstitution: {
      institutionname: '洛西社区卫生服务站'
    },
    homeTeam: {
      name: '李明明团队'
    },
    homeDoctor: {
      name: '李明明'
    },
    homeServicePackage: {
      packageName: '老年人服务包',
      price: '1000'
    },
    cycle: '1',
    type: '0',
    applicationTime: '2020/10/09 10:09:09',
    effectiveDate: '2020/10/11 10:09:09',
    remark: '无',
    homeInstitutionId: 1,
    homeTeamId: 1,
    homeDoctorId: 1,
    homeServicePackageId: 1,
    userId: 1,
    createTime: '2020-10-09 10:09:09',
    updateTime: '2020-10-09 10:09:09'

 })
  function getqianyueInfo() {
    return new Promise((resolve,reject)=>{
      qianyue(props.userId).then((res) => {
      console.log('getqianyueInfo',res.data)
contractInfo.value = res.data;
resolve(res.data)
    }).catch((error) => {
      console.log('getqianyueInfoerror',error);
      reject(error)
    })
    })
  
  }

  
  // 模拟签约记录数据
  const contractRecords = ref([
    {
      id: '2021340001',
      institution: '洛西社区卫生服务站',
      team: '李明明团队',
      doctor: '李明明',
      servicePackage: '老年人服务包',
      applicationTime: '2020/10/09 10:09:09',
      expiryTime: '2020/10/11 10:09:09'
    },
   
  ])
  function getcontractlistInfo() {
    return new Promise((resolve,reject)=>{
      contractlist(props.userId).then((res) => {
      console.log('getcontractlistInfo',res.data) 
      contractRecords.value = res.data;
        
      resolve(res.data)
      }) 
    }) 
  }
  // 模拟查看详情方法
  const viewDetails = (row) => {
    console.log('查看详情功能待实现，此处模拟触发，查看的数据为：', row)
  }
  
  // 模拟返回方法
  const goBack = () => {
    router.push({ path: 'resident' });
  }
  onMounted(async () => {
  await getqianyueInfo();
  await getcontractlistInfo();
}); 
  </script>
  
  <style scoped>
  .container {
    padding: 20px;
  }
  
  .current-contract-info {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .header {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: bold;
  }
  
  .info-content {
    display: flex;
    flex-wrap: wrap;
  }
  
  .info-item {
    margin-bottom: 20px;
  
  }
    
  .info-item span:first-child {
  
    font-size:15px; /* 字体大小 */
    opacity: 0.6;
  }
  .contract-records {
    margin-bottom: 20px;
  }
  
  .el-table {
    margin-top: 10px;
  }
  </style>